<template>
    <div class="container">
        <header>头</header>
        <main>
            <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
                <LunboCom :bannerList="bannerList"></LunboCom>
                <NavCom :navList="navList"></NavCom>
                <SkillCom></SkillCom>
                <van-list :immediate-check="false" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                    @load="onLoad">
                    <ListCom :proList="proList"></ListCom>
                </van-list>

            </van-pull-refresh>
        </main>
    </div>
</template>

<script>
import ListCom from './components/ListCom.vue';
import LunboCom from './components/LunboCom.vue';
import NavCom from './components/NavCom.vue';
import SkillCom from './components/SkillCom.vue';
import { getBannerList, getSkillList, getMenuList, getProList } from '@/apis/home';
// import { doRegister } from '@/apis/user';
// 在组件中数据请求，传递给子组件
export default {
    components: {
        ListCom,
        LunboCom,
        SkillCom,
        NavCom
    },
    data() {
        return {
            bannerList: [],
            skillList: [],
            navList: [],
            proList: [],
            count: 2,
            limitNum: 12,
            /*
            List 组件通过 loading 和 finished 两个变量控制加载状态，
            当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
            此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
            若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
            true: 加载中，关闭状态， 会显示一直转圈的效果
            false: 不加载了。打开状态，可以继续发请求请求数据
            */
            loading: false,
            finished: false,
            /*
            下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，
            下拉之后，设置refreshLoading为true，显示加载动画
            操作完成后将 v-model 设置为 false，表示加载完成。
            */
            refreshLoading: false,
            
            // 判断是否下拉
            isRefresh: false
        }
    },
    methods: {
        onLoad() {
            if (!this.isRefresh) {
                this.count++
            }
            console.log(111);
            // this.loading=false
            getProList({ count: this.count, limitNum: this.limitNum }).then(({ data: res }) => {
                // 模拟异步加载数据的
                setTimeout(() => {
                    if (res.data.length > 0) {
                        this.proList = this.proList.concat(res.data)
                        this.count++;
                        this.loading = false;
                    } else {
                        this.finished = true;
                    }
                }, 2000)
            })
        },
        onRefresh() {
            console.log(22222);
            // 设置为false，就是代表关闭loading效果，设置为true，代表开启loading
            // 刷新的时候，默认让它设置为true，打开loading，  
            // 数据加载完毕，再设置为false，关闭loading 
            this.refreshLoading = true;
            this.count = 1;
            getProList({ count: this.count, limitNum: this.limitNum }).then(({ data: res }) => {
                this.proList = res.data;
                this.count++
                this.refreshLoading = false;
            })
            this.isRefresh = true
        }
    },
    created() {
        getBannerList().then(({ data: res }) => {
            this.bannerList = res.data
        })
        getSkillList().then(({ data: res }) => {
            this.skillList = res.data;
        })
        getMenuList().then(({ data: res }) => {
            this.navList = res.data
        })
        getProList({ count: this.count, limitNum: this.limitNum }).then(({ data: res }) => {
            console.log(res);
            this.proList = res.data
        })
    }
}
</script>

<style scoped></style>